<script setup lang="ts">
import {nextTick, ref, onMounted, watch, defineModel} from "vue";
import MyImage from "@/components/image/myImage.vue";

const content = defineModel('modelValue');

const contentCopy = ref(content.value);
const emits = defineEmits(["update"]);
const props = defineProps({
  type: {
    type: String,
    default: "text" //text 文本类型    numText 数字文本  image 图片  select 选择框   option 单选框
  },
  typeOption: {
    type: Array,
    default: [{label: "", value: ""}]
  },
  canEdit: {
    type: Boolean,
    default: true
  },
  imageConfig: {
    type: Object,
    default: {shape: "circle", size: 100}
  }
})

const edit = ref(false)

function doEdit() {
  content.value = contentCopy.value;
  emits("update", content.value);
  edit.value = false;
  strListDialogShow.value = false
}

function cancel() {
  edit.value = false;
  strListDialogShow.value = false;
  contentCopy.value = content.value;
}

function getTypeOptionValue() {
  if (props.typeOption?.length) {
    for (let i = 0; i < props.typeOption.length; i++) {
      let value = props.typeOption[i].value;
      let label = props.typeOption[i].label;
      if (value == content.value) {
        return label;
      }
    }
  }
  return "";
}

const strListDialogShow = ref(false);
const payloadTags = ref([]);
const inputVisible = ref(false);
const payloadInputValue = ref("");

function listDialogShow() {
  payloadTags.value = content.value.split(",");
  strListDialogShow.value = true;
}

function clearValue() {
  payloadTags.value = []
  contentCopy.value = "";
  inputVisible.value = false
  payloadInputValue.value = ''
}

const handleClose = (tag: string) => {
  payloadTags.value.splice(payloadTags.value.indexOf(tag), 1);
  contentCopy.value = payloadTags.value.join();
}

const saveTagInput = ref()
const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    saveTagInput.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  // if (inputVisible.value) {
  let payloadArr = payloadInputValue.value.split("\n");
  if (payloadArr.length > 0) {
    payloadArr.forEach((item) => {
      item = item.trim();
      if (item.length > 0) {
        payloadTags.value.push(item);
      }
    })
  } else {
    payloadInputValue.value = payloadInputValue.value.trim();
    if (payloadInputValue.value.length > 0) {
      payloadTags.value.push(payloadInputValue.value);
    }
  }

  // }
  contentCopy.value = payloadTags.value.join();
  inputVisible.value = false
  payloadInputValue.value = ''
}
</script>

<template>
  <div class="form-item-box">
    <div class="type-box">
      <div class="content-box" v-if="!edit">
        <div class="content">
          <span v-if="type === 'text' || type === 'numText'">
              <span class="none" v-if='content === null || content == ""|| content === undefined'>
                未设置
              </span>
              <span v-else>
                {{ content }}
              </span>
          </span>
          <span v-else-if="type === 'option' || type === 'select'">
            <span class="none"
                  v-if='getTypeOptionValue() === null || getTypeOptionValue() == ""|| getTypeOptionValue() === undefined'>
                未选择
              </span>
            <span v-else>
                {{ getTypeOptionValue() }}
              </span>
          </span>
          <span v-else-if="type === 'image'">
            <el-avatar :size="100" :src="content"/>
          </span>
          <span v-else-if="type === 'strList'">
            <el-button type="primary" size="small" @click="listDialogShow">查看信息</el-button>
          </span>
        </div>
        <div v-if="canEdit && type!=='strList' " class="edit-button" @click="edit = true">
          <span class="iconfont icon-bianji" style="padding: 0 .2rem"/>编 辑
        </div>
      </div>
      <div class="edit-box" v-else>
        <div class="edit-input-box" v-if="type === 'text'">
          <el-input v-model="contentCopy"/>
        </div>
        <div class="edit-input-box" v-else-if="type === 'numText'">
          <el-input v-model="contentCopy" type="number" clearable/>
        </div>
        <div class="edit-input-box" v-else-if="type === 'select'">
          <el-input v-model="contentCopy" clearable/>
        </div>
        <div class="edit-input-box" v-else-if="type === 'image'">
          <my-image v-model="contentCopy" :image-config='imageConfig'/>
        </div>
        <div class="edit-input-box" v-else-if="type === 'option'">
          <el-radio-group v-model="contentCopy">
            <el-radio v-for="(item,index) in typeOption" :key="index" :value="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </div>
        <div class="edit-input-box" v-else-if="type === 'strList'">
          <el-button type="primary" size="small" @click="listDialogShow">修改信息</el-button>
        </div>
        <div class="edit-input-button-box">
          <el-button type="success" size="small" @click="doEdit">确 认</el-button>
          <el-button type="danger" size="small" @click="cancel">取 消</el-button>
        </div>
      </div>
    </div>
    <div class="dialog-box">
      <el-dialog v-model="strListDialogShow" title="设置新人礼包" width="1100">
        <div class="payload-box">
          <div class="payload-item" :key="tag" v-for="tag in payloadTags">
            <el-tag closable :disable-transitions="false" @close="handleClose(tag)"> {{ tag }}</el-tag>
          </div>
          <div class="payload-item">
            <el-input ref="saveTagInput" class="input-new-tag" style="width: 100rem" v-if="inputVisible" clearable
                      v-model="payloadInputValue" :rows="3" type="textarea" placeholder="请输入指令(支持多条指令同时添加，一行一条即可)" size="small"
                      @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
            </el-input>
          </div>
          <div class="payload-item">
            <el-button type="danger" size="small" @click="clearValue">清 空</el-button>
            <el-button v-if="!inputVisible" type="success" size="small" @click="showInput">添 加</el-button>
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">

            <el-button type="info" size="small" @click="cancel">取 消</el-button>
            <el-button type="primary" size="small" @click="doEdit">修 改</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="scss">
.form-item-box {

  .type-box {
    min-width: 3rem;

    .content-box {
      display: flex;
      align-items: center;

      .content {
        padding: 0 1rem;

        .none {
          color: #D4D7DE;
        }
      }

      .edit-button {
        display: none;
        color: #0fd7ff;
        cursor: pointer;
        user-select: none;
      }
    }

    .edit-box {
      display: flex;
      align-items: center;
      user-select: none;


      .edit-input-button-box {
        padding: 0 1rem;
        display: flex;
      }
    }
  }

  .type-box:hover {
    .edit-button {
      display: flex;
    }
  }

  .dialog-box {
    .payload-box {
      display: flex;
      flex-direction: column;

      .payload-item {
        margin: .5rem .3rem;
      }

      .el-tag + .el-tag {
        margin-left: 1rem;
      }

      .button-new-tag {
        margin-left: 1rem;
        height: 3.2rem;
        line-height: 3rem;
        padding-top: 0;
        padding-bottom: 0;
      }

      .input-new-tag {
        width: 9rem;
        margin-left: 1rem;
        vertical-align: bottom;
      }
    }
  }
}
</style>